<template>
	<zui-watermark content="东莞宏悦酒业" :opacity="0.08" :overlay="0.5" ></zui-watermark>
	<u-sticky :zIndex="9">
		<view class="top-view">
			<up-search shape="square" placeholder="输入商品名称查询" bgColor="#f4f6f8" height="40px" searchIconColor="#BABABA"
				placeholderColor="#BABABA" borderColor="#f4f6f8" :showAction="false" v-model="page.params.keyword"
				@change="List"></up-search>
			<up-tabs :list="TabList" :current="page.current" :scrollable="false" lineColor="#4080ff" :inactiveStyle="{
					  fontSize: '14px',
					  color: '#86909c',
				  }" :activeStyle="{
					  fontSize: '14px',
					  color: '#111F34',
					  fontWeight: '500'
				  }" @click="TabClick"></up-tabs>
		</view>
	</u-sticky>
	<block v-if="page.list.length === 0">
		<up-empty text="暂无数据"
			icon="https://edu-yjzk.oss-cn-hangzhou.aliyuncs.com/education/common/2025/06/09/png/empty_20250609101324A002.png"
			width="180px" height="142px" marginTop="160px" textSize="12px">
		</up-empty>
	</block>
	<view v-else class="u-p-l-32 u-p-r-32 u-p-t-12" style="padding-bottom: 60px;">
		<view class="manifest-item" v-for="info in page.list" :key="info.id">
			<view class="u-flex u-flex-between u-flex-items-baseline">
				<view class="name">{{ info.name }}</view>
				<view class="status-tag" :class="{
					'init': info.status === 0,
					'geted': info.status === 1,
					'payed': info.status === 2,
					'over': info.status === 3,
				}">
					{{ info.status === 0 ? '待收货' :
						info.status === 1 ? '待验收' :
						info.status === 2 ? '待结算' :
							info.status === 3 ? '已结算' : '状态未知' }}
				</view>
			</view>
			<view class="area">
				<up-row customStyle="margin-bottom: 10px">
					<up-col span="3">
						<view class="f-s-12 up-tips-color">
							提交用户 </view>
					</up-col>
					<up-col span="9">
						<view class="f-s-13">
							{{ info.nickName }} 
						</view>
					</up-col>
				</up-row>
				<up-row customStyle="margin-bottom: 10px">
					<up-col span="3">
						<view class="f-s-12 up-tips-color">
							手机号码 </view>
					</up-col>
					<up-col span="9">
						<up-copy :content="info.phone" @success="CopySuccess(info.phone)">
							<view class="f-s-13 f-w-500" >
								<text style="text-decoration: underline;">{{ info.phone }}</text>
								<text class="f-s-10 u-info-disabled u-m-l-12">复制</text>
							</view>
						</up-copy>
						
					</up-col>
				</up-row>
				<up-row customStyle="margin-bottom: 10px">
					<up-col span="3">
						<view class="f-s-12 up-tips-color">
							提交时间
						</view>
					</up-col>
					<up-col span="9">
						<view class="f-s-13">{{ info.createAt }}</view>
					</up-col>
				</up-row>
				<up-row customStyle="margin-bottom: 10px">
					<up-col span="3">
						<view class="f-s-12 up-tips-color">
							快递公司
						</view>
					</up-col>
					<up-col span="9">
						<view class="f-s-13">{{ info.express }}</view>
					</up-col>
				</up-row>
				<up-row customStyle="margin-bottom: 10px" align="top">
					<up-col span="3">
						<view class="f-s-12 up-tips-color">
							货单单号
						</view>
					</up-col>
					<up-col span="9">
						<view v-for="(num,index) in info.numberList" :key="index" class="u-m-b-12"
							@click="ShowExpress(info,num)">
							<view class="f-s-13" style="word-wrap:break-word;word-break:break-all;text-align: justify;">
								<up-text iconStyle="font-size: 10px;margin-left: 4px;color: #aaa" :text="num"
									color="#165dff" bold suffixIcon="物流信息"></up-text>
							</view>
						</view>
					</up-col>
				</up-row>
			</view>
			<view v-if="info.remark" class="remark-area">
				备注：{{ info.remark }}
			</view>
		</view>
	</view>

	<view class="pagination-section">
		<up-pagination :current-page="page.params.pageNum" :page-size="page.params.pageSize" :total="page.total"
			layout="prev, total, next" @current-change="handleCurrentChange" />
	</view>

	<up-popup :show="page.show" mode="right" @close="page.show = false">
		<view class="popup-area">
			<view class="f-s-14">{{ page.express.name }}</view>
			<up-copy :content="page.express.number" @success="CopySuccess(page.express.number)">
				<view class="f-s-18 f-w-800 u-m-t-16">
					{{ page.express.number }}
					<text class="f-s-10 u-info-disabled u-m-l-12">点击复制</text>
				</view>
			</up-copy>
			<view class="f-s-12 u-info u-m-t-40 u-m-b-32">
				物流跟踪
				<text :style="{
					color: page.express.state === '3' ? '#00b42b':'#ff7d00'
				}">[{{ page.express.state === '3' ? '已签收':'运输中' }}]</text>
			</view>
			<scroll-view scroll-y style="height: calc(100vh - 180px);">
				<up-steps current="0" direction="column" dot inactiveColor="#c9cdd4" activeColor="#00b42b">
					<up-steps-item v-for="(exp,index) in page.express.recordList" :key="index">
						<template #content>
							<view class="f-s-12">{{ exp.desc }}</view>
							<view class="f-s-12 u-info u-m-t-16 u-m-b-20">{{ exp.date }}</view>
						</template>
					</up-steps-item>
				</up-steps>
			</scroll-view>
			<view class="u-m-b-48 text-center f-s-12 u-p-t-24" style="color: #165dff;">
				更多详细信息请到物流官网查询
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import AppConfig from '@/Config.js'
	import ManifestApi from '@/Api/Manifest.js';
	import {
		getToken
	} from '@/Util/auth.js'
	const page = ref({
		current: 0,
		total: 0,
		params: {
			status: 0,
			keyword: '',
			pageNum: 1,
			pageSize: 10,
			
		},
		list: [],
		show: false,
		express: {}
	})

	const TabList = [{
		name: '待收货',
		value: 0
	}, {
		name: '待验收',
		value: 1
	}, {
		name: '待结算',
		value: 2
	}, {
		name: '已结算',
		value: 3
	}, {
		name: '全部',
		value: ''
	}, ]

	const handleCurrentChange = (e) => {
		page.value.params.pageNum = e
		List()
	}

	const List = () => {
		ManifestApi.List(page.value.params).then(resp => {
			page.value.total = resp.total
			page.value.list = resp.rows.map(data => {
				return {
					...data,
					numberList: data.number.split('|')
				}
			})
		})
	}

	const TabClick = (e) => {
		page.value.params.status = e.value
		page.value.params.pageNum = 1
		List()
	}

	const CopySuccess = (number) => {
		uni.showToast({
			title: `${number} 已复制`,
			icon: 'none'
		})
	}

	const ShowExpress = (info, num) => {
		uni.showLoading({
			title: '物流数据查询中'
		})
		ManifestApi.Express(num).then(resp => {
			uni.hideLoading()
			if (resp.data.recordList.length === 0) {
				uni.showToast({
					title: '暂无物流信息',
					icon: 'none'
				})
				return
			}
			page.value.express = {
				name: info.express,
				number: num,
				state: resp.data.state,
				recordList: resp.data.recordList
			}
			page.value.show = true
		})
	}

	List()
</script>

<style lang="scss" scoped>
	.top-view {
		padding: 12px 16px;
		background-color: #fff;
	}

	.manifest-item {
		background-color: #fff;
		border-radius: 4px;
		padding: 16px 18px;
		margin-bottom: 16px;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);

		.status-tag {
			font-size: 11px;
			line-height: 24px;
			padding: 0 10px;
			border-radius: 2px;
			display: inline-block;
			min-width: fit-content;
			margin-left: 12px;
			background-color: #fff;

			&.init {
				color: #4e5969;
				border: 1px solid #4e5969;
			}

			&.geted {
				color: #4080ff;
				border: 1px solid #4080ff;
			}

			&.payed {
				color: #ff9a2d;
				border: 1px solid #ff9a2d;
			}

			&.over {
				color: #00b42b;
				border: 1px solid #00b42b;
			}
		}

		.name {
			line-height: 24px;
			font-size: 16px;
			font-weight: bold;
		}

		.area {
			margin-top: 12px;
			border-radius: 4px;
			background-color: #f7f8fa;
			padding: 12px 20px 4px;
		}


	}

	.remark-area {
		font-size: 12px;
		color: #999;
		line-height: 24px;
		margin-top: 8px;
	}



	.popup-area {
		width: 60vw;
		padding: 16px 24px;
	}
	
	.pagination-section{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 12px 32px 32px;
		box-sizing: border-box;
		background-color: #fff;
	}
	
</style>